<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>德德后台管理系统</title>
  <link rel="stylesheet" href="/assets/layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <!-- 导入公共页面 -->
  {{ include "./common/header.html" }}

  <!-- 导入公共页面 -->
  {{ include "./common/side.html" }}
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <!-- <div style="padding: 15px;">文章列表区域.</div> -->
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    底部固定区域
  </div>
</div>
<script src="/assets/layui/layui.js"></script>
<script>
//JS 
layui.use(['element', 'layer', 'util'], function(){
  var element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,$ = layui.$;
  
  //头部事件
  util.event('lay-header-event', {
    //左侧菜单事件
    menuLeft: function(othis){
      layer.msg('展开左侧菜单的操作111', {icon: 0});
    }
    ,menuRight: function(){
      layer.open({
        type: 1
        ,content: '<div style="padding: 15px;">处理右侧面板的操作234</div>'
        ,area: ['260px', '100%']
        ,offset: 'rt' //右上角
        ,anim: 5
        ,shadeClose: true
      });
    }
  });

  table.render({
      elem: '#cate'
      ,url: '/cateData',
      toolbar:'#cateTool'
      ,cols: [[
        {field:'id', width:80, title: '序号'}
        ,{field:'title', width:100, edit:'text',title: '分类名称'}
        ,{field:'content', width:180, edit:'text',title: '排序'}
        ,{field:'author', width:180, edit:'text',title: '作者'}
        ,{field:'status', width:180, edit:'text',title: '是否发布'}
        ,{field:'add_date', width:180, edit:'text',title: '添加时间'}
        ,{field:'cate_id', width:180, edit:'text',title: '分类排序'}
        ,{fixed:"right", width:280, title: '操作',templet:(obj)=>{
          return `
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
          `
        }}
      ]]
    });

    //监听单元格编辑
    table.on('edit(cate)', async function (obj) {
      const {data} = obj;
      const {code,message} = await $.post('/updCateData',data)
      if(code === 0){
        layer.msg(message)
      }
    });
    
    //监听行工具事件
    table.on('tool(cate)', function(obj){
      const {event,data} = obj;
      const {cate_id} = data;
      //询问框
      if(event === 'del'){
        layer.confirm('确认删除吗', {
          btn: ['是的','取消'] //按钮
        }, async function(){
          const {code} = await $.post('/deleteCate',{cate_id})
          if(code === 0){
            layer.msg('的确很重要', {icon: 1});
            // 刷新（重载）表格数据
            // location.reload();
            table.reload('cate')
          }
         
        }, function(){
          
        });
      }
    });
  
});
</script>
</body>
</html>